.x-button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &--primary {
    background: linear-gradient(45deg, $color-primary, $color-sub);
    color: white;
    border-color: white;
    box-shadow: 0 2px 8px rgba($color-primary, 0.3);
    
    &:hover {
      background: darken($color-primary, 5%);
      transform: translateY(-1px);
    }
  }

  &--danger {
    background: $color-danger;
    color: white;
    border-color: $color-danger;

    &:hover {
      background: darken($color-danger, 5%);
      transform: translateY(-1px);
    }
  }

  &--success {
    background: $color-success;
    color: white;
    border-color: $color-success;

    &:hover {
      background: darken($color-success, 5%);
      transform: translateY(-1px);
    }
  }

  &--warning {
    background: $color-warning;
    color: white;
    border-color: $color-warning;
    
    &:hover {
      background: darken($color-warning, 5%);
      transform: translateY(-1px);
    }
  }

  &--info {
    background: $color-info;
    color: white;
    border-color: $color-info;
    
    &:hover {
      background: darken($color-info, 5%);
      transform: translateY(-1px);
    }
  }
  
  &--sub {
    background: $color-sub;
    color: white;
    box-shadow: 0 2px 8px rgba($color-sub, 0.3);
    
    &:hover {
      background: darken($color-sub, 5%);
      transform: translateY(-1px);
    }
  }
}
